<template>
  <view class="by-cell flex-row align-center justify-between padding-tb-10" :class="{border}" @click="$emit('click')">
    <view class="flex-row align-center" :style="{width: labelWidth}">
      <slot name="labelLeading" />
      <text class="text-30 color-black" :class="{'text-bold': labelBold}" :style="{fontSize: labelSize, color: labelColor}">{{label}}</text>
      <slot name="labelEnding" />
    </view>
    <view class="flex-row flex-item align-center" :class="{'justify-end': !leftValue}">
      <slot>
        <input
          v-if="type"
          class="text-30 color-t1 height-full input text-right flex-item"
          placeholder-class="color-placeholder"
          :value="modelValue"
          :placeholder="placeholder"
          :type="type"
          :disabled="disabled"
          :class="{'text-bold': valueBold}"
          :style="{fontSize: valueSize, color:valueColor, textAlign: leftValue ? 'left' : ''}"
          :maxlength="maxlength"
          @input="setValue"
        />

        <view v-else class="input flex-item text-right text-overflow-one" :style="{textAlign: leftValue ? 'left' : ''}">
          <text class="text-30" :class="[modelValue ? 'color-t1' : 'color-placeholder']">{{ modelValue || placeholder}}</text>
        </view>
      </slot>
      <text v-if="showArrow" class="technician-fanhui text-28 color-t2 margin-left-30"></text>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { AnyObject } from '@/common/types'

interface IProps{
  type?: string
  label?: string
  labelWidth?: string
  labelSize?: string
  labelColor?: string
  labelBold: boolean
  valueSize?: string
  valueColor?: string
  valueBold: boolean
  placeholder?: string
  disabled: boolean
  showArrow: boolean
  leftValue: boolean
  maxlength: number
  modelValue: string
  border: boolean
}

withDefaults(defineProps<IProps>(), {
  labelBold: false,
  valueBold: false,
  leftValue: false,
  maxlength: -1,
  modelValue: '',
  border: false,
  showArrow: false,
  disabled: false
})

const $emit = defineEmits(['update:modelValue', 'click'])

function setValue(e:AnyObject) {
  let { value } = e.detail
  if (value) value = value.replace(/\s+/g, '')
  $emit('update:modelValue', value)
}
</script>

<style scoped lang="scss">
.by-cell{
  height: 96rpx;

  &.border{
    border-bottom: 2rpx solid $color-border;
  }

  .input{
    width: 60% !important;
  }

  .technician-fanhui{
    transform: rotate(180deg);
  }

}
</style>
